<template>
  <div class="wrapper">
     <el-form  status-icon  ref="ruleForm" class="demo-ruleForm">
      <h2>欢迎回来</h2>
      <!-- <el-form-item  prop="pass" style="width: 60vw;">
        <el-input type="password"  autocomplete="off" placeholder="邮箱"></el-input>
      </el-form-item> -->
      <el-form-item style="width: 60vw;">
        <el-input type="text"  autocomplete="off" placeholder="用户名" v-model="loginInfo.username">
          <!-- <i slot="suffix" class="el-input__icon el-icon-circle-close" style="color:red" v-show="!formFlag.code"></i>  -->
        </el-input>
      </el-form-item>
      <el-form-item style="width: 60vw;" >
        <el-input type="password" placeholder="密码" v-model="loginInfo.password" show-password>
          <!-- <i slot="suffix" class="el-input__icon el-icon-circle-close" style="color:red" v-show="!formFlag.code"></i> -->
        </el-input>
      </el-form-item>

      <el-form-item class="remember-wrapper">
        <el-checkbox label="记住我" v-model="loginInfo.remember"></el-checkbox>  
      </el-form-item>

      <el-form-item>
        <el-button type="primary" id="submit" @click="login">登录</el-button>
      </el-form-item>
      
    </el-form>  
  </div>
</template>

<script>
import cookie from '@/tools/cookie'
  export default {
    name: 'login',
    components:{},
    props:{},
    data(){
      return {
          loginInfo: {
            username: '',
            password: '',
            remember: false
          },
          formFlag: {
            username: false,
            password: false
          }
      }
    },
    created(){},
    mounted(){
      if (localStorage.getItem('pta_username') && localStorage.getItem('pta_password')) {
        this.loginInfo.username = localStorage.getItem('pta_username')
        this.loginInfo.password = localStorage.getItem('pta_password')
      }
    },
    activated(){},
    updated(){},
    methods:{
      isLoginedEmit () {
        // console.log('子向父->')
        this.$emit('changeIsLogined')
      },
      login () {
        if (this.formFlag.username && this.formFlag.password) {
          this.$message.error('登录失败, 请检查 用户名 和 密码 是否正确')
          return
        }
        this.$axios.post('/back/user/auth/login', {
          "username": this.loginInfo.username,
          "password": this.loginInfo.password,
          "remember": this.loginInfo.remember
        }).then((res) => {
          if (res.data.code != 200) {
            this.$message.error('登录失败, 请检查 用户名 和 密码 是否正确')
          } else {
            this.$message({
              message: '登录成功',
              type: 'success'
            })
            // cookie.addCookie('pta_username', res.data.data.username)
            // cookie.addCookie('pta_email', res.data.data.email)
            // cookie.addCookie('token', res.data.data.token)
            localStorage.setItem('pta_username', res.data.data.username)
            localStorage.setItem('pta_email', res.data.data.email)
            localStorage.setItem('token', res.data.data.token)
            localStorage.setItem('pta_exp',res.data.data.exp)
            localStorage.setItem('pta_password', this.loginInfo.password)
            localStorage.setItem('uid', res.data.data.uid)
            
            this.isLoginedEmit ()  
            this.$router.push('/')
            // cookie.getAllCookies()
           
          }
        }).catch((err) => {
          console.warn(err)
          this.$message.error('登录失败，请检查网络连接')
        })

      }
    },
    computed:{},
    watch:{
      registerInfo: {
        
        handler (newValue, oldValue) {
          this.formFlag.username = RE.usernameCheck(newValue.username)
          this.formFlag.password = RE.passwordCheck(newValue.password)
        },
        deep: true,
        imediate: true        
      } 
    },
  }
</script>
<style scoped>
  .wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;    
  }
  #submit {
    width: 40vw;
  }
  h2 {
    color: #fff;
    font-size: 2em;
    margin: 1rem 0;
  }
  .remember-wrapper {
    margin: -2.5vh 0 0 0;
  }
  .remember-wrapper * {
    vertical-align: middle;
    color: #fff;
    font-weight: 600;
    font-family: Arial;
  }
</style>